<template>
<div class="channel-edit">
<!--  我的频道-->
<van-cell :border="false" >
<div slot="title" class="title-text">我的频道</div>
<van-button class="edit-btn" type="danger" plain round size="mini" @click="isEdit=!isEdit" >{{isEdit ? '完成' :'编辑'}}</van-button>
</van-cell>
<van-grid :gutter="8" class="my-grid">
  <van-grid-item v-for="(item,index) in mychannels"
                 :key="index"
                 class="gutter-item"
                 @click="ChannelClick(item,index)"
  >
<!--    叉叉图标-->
    <van-icon name="clear"
              slot="icon"
              v-show="isEdit && ! fiexChannel.includes(index)"
    ></van-icon>
<!-- {active:index === active} 如果为true则添加一个active类名   -->
  <span  slot="text"
         class="channel-name"
         :class="{active:index === active}"
  >{{item.name}}</span>

  </van-grid-item>

</van-grid>
<!--频道推荐-->
  <van-cell :border="false" >
    <div slot="title" class="title-text">频道推荐</div>
  </van-cell>
  <van-grid :gutter="8" class="recommend-grid">
    <van-grid-item
      v-for="(item,index) in recommendChannels"
      :text="item.name"
      :key="index"
      icon="plus"
      class="gutter-item"
      @click="addChannel(item)"
    >
    </van-grid-item>

  </van-grid>



</div>
</template>

<script>

import {getAllChannels,addUserChannel,deleteUserChannel} from '@/api/home'
import {mapState} from 'vuex'
import {setItem} from '@/utils/storage'

export default {
name: "channelEdit",
  data(){
  return{

    AllChannels:[],  //所有的列表

    isEdit:false ,//编辑完成切换
    fiexChannel:[0]

  }
  },
  props:{
    mychannels:{
      type:Array,
      required:true
    },
    active:{
      type:Number,
      required: true,
    }
  },
  created() {
this.getAllChannels()
  },
  computed:{
  ...mapState(['user']),
  //所有的列表去掉我原本有的列表，就是推荐列表
      recommendChannels(){
        return  this.AllChannels.filter(item =>{

          return  this.mychannels.findIndex(myitem =>{
            return myitem.id === item.id
          })===-1

        })

      }


  },
  methods:{

//获取所有的列表
    async getAllChannels(){

    try {

      const{ data }=await  getAllChannels()
      this.AllChannels=data.data.channels

    }catch (err){
      console.log(err)
    }

  },

    //把推荐的列表的文章添加到我的列表
 async   addChannel(item){



     if (this.user) {

       try {
         // 已登录，数据存储到线上
         await addUserChannel([{
           id: item.id, // 频道 id
           seq: this.mychannels.length // 频道的 序号
         }])
         this.mychannels.push(item)

       }catch (err) {
         console.log(err)
         this.$toast('添加频道失败')
       }


     }else {
//未登录
       this.mychannels.push(item)

       setItem('CHANNELS',this.mychannels)
     }




},

    ChannelClick(item,index){
      if (this.isEdit){
        //编辑状态就执行删除
        if (this.fiexChannel.includes(index)){
          return
        }

        if (index <= this.active){

          this.$emit('updata-active',this.active-1,true)
          //处理删除频道的持久化

        }
        this.mychannels.splice(index,1)
        this.removeChannels(item,index)

      }else {
//非编辑状态则执行切换
        this.$emit('updata-active',index)



      }


    },

    //删除频道的处理逻辑
   async removeChannels(item,index){

      try {
        if (this.user){
          //登录时
          await deleteUserChannel(item.id)


        }else {
          //未登录
          setItem('CHANNELS', this.mychannels)

        }

        }catch (err){
        console.log(err)
      }
      }





}
  }


</script>

<style scoped lang="less">
.channel-edit{

  padding: 80px 0;

  .title-text{
  font-size: 32px;
  color: #333333;
  }
  .edit-btn{
    width: 104px;
    height: 48px;
    font-size: 26px;
  }

  /deep/.gutter-item{

    width: 160px;
    height: 86px;
    .van-grid-item__content{
      .van-icon-cross{

      }
      white-space: nowrap;
      background-color: #f4f5f6;
        .van-grid-item__text,.channel-name{
          font-size: 28px;
          color: #222;
        }
      .active{
        color: red;
      }
    }
  }
  /deep/.my-grid{
 .van-grid-item__icon-wrapper{
    position: unset;
   .van-icon-clear{

     position: absolute;
     top: -16px;
     right: -16px;
     font-size: 30px;
   }
 }

  }


 /deep/ .recommend-grid{
   .gutter-item{
     .van-grid-item__content{

       flex-direction: row;
       .van-icon-plus{
         font-size: 24px;
         margin-right: 15px;
       }
       .van-grid-item__text{
         margin-top: 0;
       }

     }
   }
  }



}
</style>
